* {
  margin: 0;
  padding: 0;
}

html,
body {
  min-width: 1280px;
  background-color: #fff;
  min-width: 1200px;
  --active-color: #176FFA;
  --font-regular-color: #303133;
  --font-info-color: #616266;
  --font-toast-color: #90939A;
  --border-w-color: #DCDFE7;
  --border-n-color: #C0C4CC;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.f-w-r {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}

.f-w-m {
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
}

header {
  width: 100%;
  height: 300px;
  background: url(../assets/bg@2x.jpg) no-repeat;
  background-size: cover;
  background-position: center;
}

header.report {
  height: 138px;
}

header nav {
  width: 100%;
  height: 54px;
  background: transparent;
}

header.report nav {
  background: #fff;
}

header nav ul {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

header nav ul li a {
  height: 54px;
  display: flex;
  align-items: center;
}

header nav ul li.logo a img {
  width: auto;
  height: 20px;
}

header nav ul li.logo a span {
  color: var(--font-regular-color);
  font-size: 14px;
  margin-left: 3px;
}

header nav ul li.search div {
  height: 34px;
  border: 1px solid var(--border-w-color);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
}

header nav ul li.search div span {
  color: var(--font-toast-color);
  font-size: 13px;
}

header nav ul li.search div img {
  width: 15px;
  height: 15px;
  margin-left: 42px;
}

.header-content {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 26px;
}

.header-content p.f-w-m {
  font-size: 34px;
  color: var(--font-regular-color);
}

header.report .header-content p.f-w-m {
  font-size: 26px;
  color: var(--font-regular-color);
}

.header-content-search-wrap {
  width: 766px;
  height: 52px;
  border: 1px solid var(--border-n-color);
  padding: 0 21px;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}

.select-wrap {
  width: 144px;
  height: 100%;
  position: relative;
  cursor: pointer;
}

.select-wrap::after {
  position: absolute;
  display: block;
  content: "";
  width: 1px;
  height: 20px;
  background: #DCDFE7;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.select-wrap .select-item {
  display: none;
}

.select-wrap::before {
  position: absolute;
  content: "";
  right: 28px;
  display: block;
  width: 20px;
  height: 20px;
  background: url(../assets/arraw@3x.png) no-repeat;
  background-size: 100% 100%;
  top: 50%;
  transform: translateY(-50%);
}

.show-area li {
  height: 52px;
  line-height: 52px;
  font-size: 16px;
  color: var(--font-regular-color);
}

.select-wrap .select-area {
  position: absolute;
  display: none;
  background-color: #fff;
  font-size: 14px;
  color: var(--font-regular-color);
  padding: 12px;
  bottom: -169px;
}

.select-wrap .select-area li {
  width: 114px;
  height: 36px;
  line-height: 36px;
  padding-left: 12px;
}

.select-wrap .select-area li label.f-w-r {
  display: block;
  width: 114px;
  cursor: pointer;

}

.select-wrap .select-area li:hover {
  background: #F0F5FB;
  border-radius: 4px;
}

.select-wrap:hover .select-area {
  display: block;
}

.select-all:checked~.show-area li:not(.show-all) {
  display: none;
}

.select-all:checked~.select-area li.all {
  color: var(--active-color);
}

.select-cas:checked~.show-area li:not(.show-cas) {
  display: none;
}

.select-cas:checked~.select-area li.cas {
  color: var(--active-color);
}

.select-name_en:checked~.show-area li:not(.show-name_en) {
  display: none;
}

.select-name_en:checked~.select-area li.name_en {
  color: var(--active-color);
}

.select-name_zh:checked~.show-area li:not(.show-name_zh) {
  display: none;
}

.select-name_zh:checked~.select-area li.name_zh {
  color: var(--active-color);
}

.input-wrap {
  width: 603px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.input-wrap input {
  padding-left: 24px;
  width: 543px;
  height: 52px;
  border: none;
  outline: medium;
  font-size: 16px;
  color: var(--font-regular-color);
}

.input-wrap span {
  width: 17px;
  height: 17px;
  background: #000000;
  opacity: 0.23;
  color: #fff;
  line-height: 15px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
}

.input-wrap span:hover {
  opacity: 0.43;
}

.icon-wrap {
  width: 22px;
  cursor: pointer;
}

.icon-wrap .i-search {
  display: block;
  width: 22px;
  height: 22px;
  background: url(../assets/search@3x.png) no-repeat;
  background-size: 100% 100%;
}

.icon-wrap .i-search:hover {
  background: url(../assets/search-active@3x.png) no-repeat;
  background-size: 100% 100%;
}

.filter-wrap {
  width: 808px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  padding-top: 12px;
}

.filter-wrap .filter-history {
  display: flex;
}

.filter-history li {
  font-size: 14px;
  color: var(--font-info-color);
  cursor: pointer;
}

.filter-history li:not(:first-of-type) {
  margin-left: 16px;
}

.filter-history li:hover {
  color: var(--active-color);
}

.filter-wrap .filter-content {
  width: 78px;
  height: 100%;
  cursor: pointer;
  position: relative;
  padding-bottom: 8px;
}

.filter-wrap .filter-content .filter-toast {
  font-size: 14px;
  color: var(--font-regular-color);
  display: flex;
  align-items: center;
}

.i-search-icon {
  width: 20px;
  height: 20px;
  background: url(../assets/bottom@3x.png) no-repeat;
  background-size: 100% 100%;
}

.filter-wrap .filter-content:hover .filter-toast {
  color: var(--active-color);
}

.filter-wrap .filter-content:hover .i-search-icon {
  background: url(../assets/top-active@3x.png) no-repeat;
  background-size: 100% 100%;
}

.filter-wrap .filter-content:hover .filter-content-wrap {
  display: block;
}

.filter-content-wrap {
  display: none;
  position: absolute;
  width: 760px;
  padding: 32px 24px;
  background-color: #fff;
  left: -730px;
  bottom: -522px;
  border: 1px solid var(--border-w-color);
  background: #FFFFFF;
  box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}

.filter-content-wrap p.f-w-m {
  height: 48px;
  background: #F2F3F4;
  text-indent: 16px;
  font-size: 16px;
  color: var(--font-regular-color);
  line-height: 48px;
  margin-bottom: 12px;
}

.filter-content-wrap ul li:last-of-type p.f-w-m {
  margin-top: 28px;
}

.filter-content-wrap ul.filter-content-options {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.filter-content-wrap ul.filter-content-options li label {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #303133;
  line-height: 44px;
  cursor: pointer;
}

.filter-content-wrap ul.filter-content-options li label input {
  margin-right: 11px;
}

.filter-content-wrap ul.checkbox-options li {
  width: 50%;
}

.filter-content-wrap ul.checkbox-options li:first-of-type {
  width: 100%;
}

.filter-content-wrap ul.radio-options li:last-of-type {
  margin-left: 32px;
}

.filter-content-wrap ul.radio-options input {
  width: 16px;
  height: 16px;
}

input[type=checkbox] {
  position: relative;
  transform: translateY(-2px);
}

input[type=checkbox]::after {
  position: absolute;
  top: 0;
  background-color: #fff;
  color: #fff;
  width: 16px;
  height: 16px;
  display: inline-block;
  visibility: visible;
  text-align: center;
  content: ' ';
  border-radius: 2px;
  box-sizing: border-box;
  border: 1px solid var(--border-n-color);
}

input[type=checkbox]:checked::after {
  content: "";
  background-color: var(--active-color);
  border-color: var(--active-color);
}

input[type=checkbox]:checked::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  width: 3px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  z-index: 1;
}

input[type=checkbox]:indeterminate::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  top: 4px;
  left: 4px;
  background-color: var(--active-color);
  z-index: 1;
}

.content {
  width: 1200px;
  margin: 0 auto;
  padding: 80px 0 20px;
}

.content p.title {
  background: url(../assets/content-bg@2x.jpg) no-repeat;
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-indent: 20px;
  font-size: 20px;
  color: var(--font-regular-color);
}

.content p.title span {
  font-size: 14px;
  color: var(--font-toast-color);
}

.content-items {
  margin-bottom: 60px;
}

.content-items li {
  border-bottom: 1px solid var(--border-w-color);
}

.content-items li p {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: 16px;
}

.content-items li p span:first-of-type {
  padding-left: 20px;
  color: var(--active-color);
  cursor: pointer;
}

.content-items li p span:first-of-type:hover {
  opacity: .75;
}

.content-items li p span:last-of-type {
  padding-right: 25px;
  color: var(--font-regular-color);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}

.content .i-content-arraw {
  width: 20px;
  height: 20px;
  background: url(../assets/arraw-bottom@3x.png) no-repeat;
  background-size: 100% 100%;
  margin-left: 16px;
  cursor: pointer;
}

.content .i-content-arraw:hover {
  background: url(../assets/arraw-bottom-active@3x.png) no-repeat;
  background-size: 100% 100%;
  transition: background .3s;
}

.content .i-content-arraw.active {
  background: url(../assets/arraw-top-active@3x.png) no-repeat;
  background-size: 100% 100%;
  transition: background .3s;
}

.content-item {
  width: 1200px;
  height: auto;
  overflow-x: auto;
}

.content-item-lists {
  border-collapse: collapse;
  margin-bottom: 8px;
}

.content-item-lists.directory {
  width: 1200px;
}

.content-item-lists.material {
  min-width: 1500px;
}

.content-item-lists tr {
  width: 1200px;
}

.content-item-lists th {
  border-top: 1px solid var(--border-w-color);
}

.content-item-lists th:first-of-type {
  border-left: 1px solid var(--border-w-color);
}

.content-item-lists th:last-of-type {
  border-right: 1px solid var(--border-w-color);
}

.content-item-lists th,
.content-item-lists td {
  height: 51px;
  border-bottom: 1px solid var(--border-w-color);
}

.content-item-lists th {
  font-size: 13px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: var(--font-regular-color);
  padding-left: 20px;
}

.content-item-lists td {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: var(--font-regular-color);
  padding-left: 20px;
  word-wrap: normal;
}

.content-item-lists a {
  color: var(--active-color);
}

.content-item-lists a:hover {
  opacity: .75;
}

.material-status {
  display: block;
  width: 56px;
  height: 24px;
  background: #F9FFF6;
  border-radius: 4px;
  border: 1px solid #C4E8B3;
  font-size: 12px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #6CC740;
  line-height: 24px;
  text-align: center;
  margin-top: 4px;
}

footer {
  height: 194px;
  background: #20293D;
}

.footer-content {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.footer-content-left p:first-of-type {
  height: 18px;
  padding-top: 32px;
  font-size: 13px;
  color: #fff;
  line-height: 18px;
  padding-bottom: 8px;
}

.footer-content ul li {
  height: 18px;
  font-size: 13px;
  color: #fff;
  line-height: 18px;
}

.footer-content-left p:last-of-type {
  padding-top: 30px;
  color: #fff;
  font-size: 13px;
}

.footer-content-right p {
  height: 18px;
  padding-top: 20px;
  font-size: 13px;
  color: #fff;
  line-height: 18px;
  padding-bottom: 8px;
}

.footer-content-right img {
  width: 112px;
  height: 112px;
  margin-top: 12px;
}

.report-content {
  width: 1200px;
  margin: 0 auto;
  padding: 80px 0;
}

.report-content-material {
  width: 1152px;
  height: 102px;
  padding: 24px;
  background: url(../assets/report-bg.jpg) no-repeat;
  background-size: cover;
}

.report-content-material p.name {
  font-size: 22px;
  color: var(--font-regular-color);
}

.report-content-material p:last-of-type {
  font-size: 14px;
  color: var(--font-regular-color);
  padding: 12px 0;
}

.report-content-material p:last-of-type span {
  display: inline-block;
  padding: 4px 10px;
  background: #FFF4F3;
  border-radius: 4px;
  border: 1px solid #FFCECE;
  font-size: 12px;
  color: #F34142;
  margin-left: 8px;
}

.report-content-material ul {
  display: flex;
  font-size: 12px;
  color: #6CC740;
}

.report-content-material ul li {
  padding: 4px 10px;
  background: #F9FFF6;
  border-radius: 4px;
  border: 1px solid #C4E8B3;
  margin-right: 8px;
}

.report-content-details li {
  margin-top: 16px;
  background: #F7F7F7;
  border-radius: 4px;
  padding: 24px;
}

.report-content-details p.title {
  font-size: 16px;
  color: var(--font-regular-color);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-w-color);
}

.report-content-details table {
  border-collapse: collapse;
  width: 100%;
}

.report-content-details table td {
  border: 1px solid var(--border-w-color);
  height: 36px;
  text-indent: 16px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: var(--font-regular-color);
}

.report-content-details table td:first-of-type {
  width: 300px;
}

.report-content-details .detail-items li {
  padding: 0;
  margin-bottom: 16px;
}

.report-content-details .detail-items li:last-of-type {
  margin-bottom: 0;
}

.report-content-details p {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #616266;
}

.report-content-details a.preview {
  font-size: 13px;
  color: var(--active-color);
  margin-top: 8px;
}

.report-content-details p.toast {
  font-size: 13px;
  color: var(--font-regular-color);
  padding: 16px 0 8px;
}

.report-content-details .detail-items li p:first-of-type {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--font-regular-color);
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  margin-bottom: 8px;
}

.report-content-details span.dot {
  width: 6px;
  height: 6px;
  background: var(--active-color);
  border-radius: 50%;
  margin-right: 7px;
}

.resk-items {
  display: flex;
}

.resk-items li {
  padding: 4px 10px;
  font-size: 12px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #F34142;
  background: #FFF4F3;
  border-radius: 4px;
  border: 1px solid #FFCECE;
  margin-top: 0;
}
